<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #menu_wrapper {
            width:calc(100% - 64px);
            padding:32px;
        }
        #menu_add_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:100%;
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:15px;
            color:#333;
        }
        #menu_add_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #menu_add_submit:hover {
            filter: brightness(110%);
        }
        .permission_input {
            width:25%;
            float:left;
            margin-right:20px;
            border:none;
            border-bottom:1px #333 solid;
            outline:none;
            padding:8px;
            font-size:15px;
            color:#333;
        }

        .menu_index_checkbox {
            float:left;
            margin-right:50px;
        }
        .menu_index_checkbox > input {
            float:left;
            width:15px;
            height:15px;
        }
        .menu_index_checkbox > p{
            display:block;
            float:left;
            font-size:12px;
            color:#333;
            height:15px;
            line-height:15px;
            margin-left:10px;
        }
        #menu_parent_select {
            display:none;
            width:100%;
            height:30px;
            margin-top:30px;
        }
        #permission_input_wrapper {
            display:none;
        }
    </style>
</head>
<body>
<div id="menu_wrapper">
    <input type="hidden" value="${request.contextPath}" id="root" />
    <div class="wrapper_head">
        <h2>菜单管理</h2>
    </div>
    <form id="menu_add_form" method="post" target="rfFrame">
        <h3>添加菜单: </h3>
        <input type="text" name="menuname" class="form_input_text" placeholder="菜单按钮名称..." autocomplete="off" />
        <div style="margin-top:30px">
            <div class="menu_index_checkbox">
                <input type="radio" value="1" name="menu_type_check" onclick="showFirstMenus(this)" checked />
                <p>一级目录</p>
            </div>
            <div class="menu_index_checkbox">
                <input type="radio" value="2" name="menu_type_check" onclick="showFirstMenus(this)" />
                <p>二级目录</p>
            </div>
            <div>
                <input type="number" value="0" name="menu_order" id="menu_order_selector" style="width:10%;border:none;border-bottom:1px #333 solid;outline:none;font-size:15px;color:#333;text-align:center" />
            </div>
            <div style="clear:both"></div>
        </div>
        <select id="menu_parent_select" name="menu_parent">
            <option value="-1">请选择父级菜单...</option>
        </select>
        <div id="permission_input_wrapper" style="margin-top:30px">
            <input type="text" class="permission_input" name="first_permission" placeholder="权限一级节点..." autocomplete="off"/>
            <input type="text" class="permission_input" name="second_permission" placeholder="权限二级节点..." autocomplete="off"/>
            <input type="text" class="permission_input" name="third_permission" placeholder="权限三级节点..." autocomplete="off"/>
            <div style="clear:both"></div>
        </div>
        <input type="text" name="menu_request" class="form_input_text" placeholder="菜单请求路径..." autocomplete="off" />
        <input type="submit" name="submit" id="menu_add_submit" value="添加菜单按钮" />
        <div style="clear:both"></div>
        <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
    </form>
</div>
</body>

<script>
    var menu_selected = false;
    function showFirstMenus(c) {
        if($(c).val() == 1) {
            if($(c).prop("checked")) {
                $("#menu_parent_select").css("display", "none");
                $("#permission_input_wrapper").css("display", "none");
            }
        }else {
            if(!$(c).prop("checkd")) {
                getAllFirstMenu();
                $("#menu_parent_select").css("display", "block");
                $("#permission_input_wrapper").css("display", "block");
            }
        }
    }
    function getAllFirstMenu() {
        if(menu_selected == false) {
            $.ajax({
                url: $("#root").val() + "/getAllFirstMenu",
                type: "post",
                async: false,
                dataType: "text",
                success: function (data) {
                    if (data != "") {
                        var json = JSON.parse(data);
                        for (var j in json) {
                            $("#menu_parent_select").append("<option value='" + json[j].id + "'>" + json[j].name + "</option>");
                        }
                        menu_selected = true;
                    }
                },
                error: function(data) {
                }
            })
        }
    }

    $(".permission_input").keyup(function() {
       var i = $(this).index();
        var string = $(this).val().replace(/(^\s*)|(\s*$)/g, '');
       if(i < 2) {
           if(string != "") {
               $(this).parent("div").children("input:eq("+(i+1)+")").css("display", "block");
           }else {
               $(this).parent("div").children("input:eq("+(i+1)+")").css("display", "none");
           }
       }
    });

    $("#menu_add_form").submit(function() {
        if($("#menu_order_selector").val() < 0) {
            alert("菜单序号不能为负数!");
            return;
        }else {
            $(".loading").css("display", "block");
            $.ajax({
                url: "${request.contextPath}/addMenu",
                type: "post",
                async: false,
                data: $("#menu_add_form").serialize(),
                dataType: "text",
                success: function(data) {
                    $(".loading").css("display", "none");
                    if(data == "nameEmpty") {
                        alert("菜单名不能为空!");
                    }else if(data == "numberError") {
                        alert("菜单序号不能为负数!");
                    }else if(data == "firstPermissionEmpty") {
                        alert("权限一级名不能为空!");
                    }else if(data == "requestEmpty") {
                        alert("请求路径不能为空!");
                    }else if(data == "error") {
                        alert("添加菜单失败!");
                    }else {
                        alert("添加菜单成功!");
                    }
                }
            })
        }
    })

</script>
</html>